// 咨询中心
<template>
  <div class="referentialMarket">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>

    <div class="w1200">
      <div class="content">
        <!-- 左侧导航 -->
        <div class="content-left">
          <div>
            <h2>
              <i class="iconfont" style="font-size:32px;">&#xe62c;</i>
              <span>资讯中心</span>
            </h2>
            <ol>
              <li
                v-for="(item) in nav"
                :key="item.id"
                :class=" item.id == $store.state.newleftgoto.id ? 'active': ''"
                @click="goTo(item)"
              >
                <span>{{ item.name }}</span>
                <i>></i>
              </li>
            </ol>
          </div>
        </div>

        <!-- 右侧导航 -->
        <div class="content-right" v-loading="$store.state.listLoading">
          <router-view/>
        </div>

      </div>
    </div>


    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>
  export default {

    name: "consultingCenter",
    data() {
      return {
        nav: [],
        navindex: 6,
      }
    },
    methods: {
      // 获取左侧导航数据
      async getInfo() {

        let res = await this.$http('/api/home/advisory_center/newscate')

        console.log(res)
        if (res.data.State.Code == 200) {
          this.nav = res.data.cate
          this.$store.commit('firstNewNav', this.nav[0])
        }
      },
      // 路由跳转
      goTo(item) {
        this.$store.commit('newleftgoto', item)
        this.$router.replace({
          name: 'webBulletin',
          params: {
            id: item.id,
          }
        })
      }
    },

    mounted() {
      this.getInfo()
    }
  }
</script>
<style lang="scss" scoped>
  .referentialMarket {
    .w1200 {
      width: 1200px;
      margin: auto;

      .content {
        width: 1200px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;

        .content-left {
          div {
            background: #f1f1f1;
            width: 212px;

            h2 {
              width: 100%;
              height: 110px;
              background-color: #0a83e7;
              color: #fff;
              text-align: center;
              letter-spacing: 2px;
              padding-top: 10px;

              img {
                width: 37px;
                height: 37px;
                display: block;
                margin: auto;
                padding-top: 20px;
              }

              span {
                display: block;
                line-height: 50px;
              }
            }

            ol {
              padding: 15px 0px;

              li {
                background: #fff;
                margin: 6px 15px;
                line-height: 32px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 0 10px;
                cursor: pointer;
                letter-spacing: 1px;
                font-weight: bold;

                i {
                  color: #888888;
                  font-weight: bold;
                }

                &:hover {
                  color: #ff7e00;
                }

                &:hover i {
                  color: #ff7e00;
                }
              }

              .active {
                color: #ff7e00;

                & {
                  i {
                    color: #ff7e00;
                  }
                }
              }
            }
          }
        }

        .content-right {
          min-height: 303px;
        }

        .el-pagination {
          margin-top: 30px;
          text-align: center;
        }
      }
    }
  }
</style>


